<template>
    <el-tabs v-model="activeIndex" class="element-tabs">
        <el-tab-pane label="元素列表" name="element-list">
            <template v-if="[2].includes(pageType)">
                <div class="search-box">
                    <el-input v-model="widgetTreeFilterText" placeholder="搜索控件关键词">
                        <template #prefix>
                            <el-icon class="el-input__icon"><icon-search /></el-icon>
                        </template>
                    </el-input>
                </div>
                <el-scrollbar height="calc(100% - 60px)">
                    <el-tree
                        ref="widgetTreeRef"
                        :data="widgetTreeList"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        :highlight-current="false"
                        :filter-node-method="widgetTreeFilterNode"
                        :props="{
                            class: (data, node) => {
                                return selectWidgetIds.includes(data.id) ? 'widget-tree-item-active' : ''
                            }
                        }"
                        class="widget-tree"
                        @node-click="(data, node, event) => handleSelectWidget(data.id)"
                    >
                        <template #default="{ node, data }">
                            <div class="widget-tree-item">
                                <div class="tree-title">
                                    <el-icon>
                                        <component :is="`icon-widget-${data.type}`" />
                                    </el-icon>
                                    {{ data.label }}
                                </div>
                                <div v-if="!data.hiddenBtn" class="tree-btns">
                                    <el-icon title="删除" @click.stop="handleDeleteWidget(data.id)"><icon-delete /></el-icon>
                                    <el-icon :title="!data.hidden ? '隐藏' : '显示'" @click.stop="handleWidgetHidden(data.id)">
                                        <icon-attention v-if="!data.hidden" />
                                        <icon-attention-forbid v-else />
                                    </el-icon>
                                </div>
                            </div>
                        </template>
                    </el-tree>
                </el-scrollbar>
            </template>
            <template v-else>
                <div class="no-data-txt" style="margin-top: 20px;">该页面没有元素列表</div>
            </template>
        </el-tab-pane>

        <template v-if="isHasFeature('dev_data')">
            <el-tab-pane label="元素数据" name="element-data">
                <el-scrollbar>
                    <div class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">应用ID</div>
                            <div class="left-desc">{{ appId }}</div>
                        </div>
                        <div class="row-right">
                            <clipboard-button :content="appId" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>

                    <div class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">历史ID</div>
                            <div class="left-desc">{{ historyId || '——' }}</div>
                        </div>
                        <div class="row-right">
                            <clipboard-button :content="historyId" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>

                    <div v-if="[2].includes(pageType)" class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">当前控件数据</div>
                            <div class="left-desc">{{ selectWidgetType || '——' }}</div>
                        </div>
                        <div v-if="!!selectWidget" class="row-right">
                            <div @click="onCodeEdit('当前控件数据', selectWidget)" class="txt-btn">编辑</div>
                            <clipboard-button :content="JSON.stringify(selectWidget)" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>

                    <div v-if="[2].includes(pageType)" class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">当前页面数据</div>
                            <div class="left-desc">{{ pageId || '——' }}</div>
                        </div>
                        <div class="row-right">
                            <div @click="onCodeEdit('当前页面数据', pageData)" class="txt-btn">编辑</div>
                            <clipboard-button :content="JSON.stringify(pageData)" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>

                    <div class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">页面管理数据</div>
                            <div class="left-desc">页面分组列表</div>
                        </div>
                        <div class="row-right">
                            <div @click="onCodeEdit('页面管理数据', cataData)" class="txt-btn">编辑</div>
                            <clipboard-button :content="JSON.stringify(cataData)" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>

                    <div class="row-wrap">
                        <div class="row-left">
                            <div class="left-title">全部数据</div>
                            <div class="left-desc">包含所有数据</div>
                        </div>
                        <div class="row-right">
                            <div @click="onCodeEdit('全部数据', appData)" class="txt-btn">编辑</div>
                            <clipboard-button :content="JSON.stringify(appData)" class="txt-btn">复制</clipboard-button>
                        </div>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
        </template>
    </el-tabs>

    <code-editor-dialog ref="codeEditorDialogRef" />
</template>

<script>
import { defineComponent, ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useEditStore } from '@/store'
import { ElMessage } from 'element-plus'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import usePhoneView from '@/libs/edit/phoneView'
import useFeature from '@/libs/feature'
import ClipboardButton from '@/components/clipboard-button'
import CodeEditorDialog from '@/components/code-editor-dialog'
export default defineComponent({
    name: 'EditLeftElement',
    components: {
        ClipboardButton,
        CodeEditorDialog
    },
    setup() {
        const route = useRoute()
        const editStore = useEditStore()

        const activeIndex = ref('element-list')

        const {
            widgetList,
            widgetListFlat,
            selectWidgetIds,
            onSelectWidget,
            onDeleteWidget
        } = useWidget()

        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            setScrollTopId
        } = usePhoneView()

        const {
            isHasFeature
        } = useFeature()

        const widgetTreeRef = ref(null)
        const widgetTreeFilterText = ref('')

        const pageType = computed(() => editStore.pageType)

        const widgetTreeList = computed(() => {
            // treeCount 树层级数限制
            const forChildren = (list, treeCount) => {
                return list.map(item => {
                    let children = []
                    if (treeCount > 0
                        && Object.prototype.toString.call(item?.eles?.content) === '[object Array]'
                        && item?.eles?.content?.some(n => !!n?.eles?.type && !!n?.eles?.id)) {
                        children = forChildren(item?.eles?.content || [], treeCount - 1)
                    }
                    return {
                        id: item.eles.id,
                        type: item.eles.type,
                        label: item.component.title,
                        hidden: item.eles.hidden,
                        hiddenBtn: ['custom-top-nav'].includes(item.eles.type),
                        children
                    }
                })
            }
            return forChildren(widgetList.value, 2)
        })

        watch(widgetTreeFilterText, (val) => {
            widgetTreeRef.value?.filter(val)
        })

        const widgetTreeFilterNode = (value, data) => {
            if (!value) return true
            return data.label.indexOf(value) !== -1 || (value === data.id)
        }
        const handleSelectWidget = id => {
            onSelectWidget([id])
            setScrollTopId(id)
        }
        const handleDeleteWidget = id => {
            onDeleteWidget([id])
            onAddPageHistory()
        }
        const handleWidgetHidden = id => {
            const widgetData = widgetListFlat.value[id].widgetData
            widgetData.eles.hidden = !widgetData.eles.hidden
        }

        const appId = computed(() => route.params.appId)
        const historyId = computed(() => editStore.historyId)
        const selectWidget = computed(() => editStore.selectWidget?.[0]?.widgetData)
        const selectWidgetType = computed(() => selectWidget.value?.eles?.type || '')
        const pageData = computed(() => editStore.pageData)
        const pageId = computed(() => editStore.pageId)
        const cataData = computed(() => editStore.cataData)
        const appData = computed(() => editStore.appData)

        const codeEditorDialogRef = ref(null)
        const onCodeEdit = (title, codeValue) => {
            codeEditorDialogRef.value.show({
                title,
                content: JSON.stringify(codeValue)
            }).then(data => {
                Object.assign(codeValue, JSON.parse(data))
                ElMessage({
                    message: '保存成功',
                    type: 'success',
                })
            }).catch(() => {})
        }

        return {
            activeIndex,
            selectWidgetIds,

            isHasFeature,

            pageType,

            widgetTreeRef,
            widgetTreeFilterText,
            widgetTreeList,
            widgetTreeFilterNode,
            handleSelectWidget,
            handleDeleteWidget,
            handleWidgetHidden,

            appId,
            historyId,
            selectWidget,
            selectWidgetType,
            pageData,
            pageId,
            cataData,
            appData,
            
            codeEditorDialogRef,
            onCodeEdit
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-left-element.less';
</style>